<template>
  <div>
    <!-- 1. 在子组件中使用 slot 占位 -->
    <!-- 2. 在父组件中, 使用组件时, 开闭标签中间的地方, 传入自定义的标签结构 -->
    <MyDialog>
      <!-- 这里直接写内容表示使用默认插槽, 而此时已经没有默认插槽了, 所有的插槽都有 name 了 -->
      <!-- 如果子组件中的插槽都有名字, 则需要使用 template 来指定名字 -->
      <!-- 2. 使用 template 包裹要传递的标签, 然后指定插槽的名字 -->
      <!-- 插槽大大的提高了组件的灵活性 -->
      <template #header>
        <h2>温馨提示</h2>
      </template>
      <template v-slot:content>
        <img style="width: 200px" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7d%2F88%2F47%2F7d884750af39930aa10117f63f24001c.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670039296&t=b02c18506b9cf26fa059b1bfbc9c1c5f" alt="">
        <h3>你好啊! 大帅哥</h3>
      </template>
      <template #footer="{ yes,no }">
        <button>{{ yes }}</button> <br>
        <button>{{ no }}</button>
      </template>
    </MyDialog>
    <MyDialog></MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  components: {
    MyDialog
  },
  data() {
    return {
      
    }
  }
}
</script>